import { ReactElement } from 'react'import { Button, Space, Text } from '@my-org/ui-components'import { useNavigate, useParams } from 'react-router-dom'import { IconChevronLeft } from '@my-org/ui-icons'import { EventCreateSteps } from '../../utils/constants'import styles from './MeetingForm.module.scss'import useEventStore from '../../store/useEventStore'import StepOne from './components/StepOne'import StepTwo from './components/StepTwo'import StepThree from './components/StepThree'import StepFour from './components/StepFour'import useRouteGuard from '@/hooks/useRouteGuard'import CreateTemplateButton from './components/CreateTemplateButton'import useCreateEvent from '../../hooks/useCreateEvent'import {  CreateEventRequest,  UpdateEventRequest} from '../../../../../mock-server/api/data-contracts'import useUpdateEvent from '../../hooks/useUpdateEvent'interface EventFormProps {  type: 'create' | 'edit'}const EventForm = ({ type }: EventFormProps): ReactElement => {  const { step, setStep, reset, participantIds, form } = useEventStore(    (state) => ({      step: state.step,      setStep: state.setStep,      reset: state.reset,      participantIds: state.form.participantIds,      form: state.form    })  )  const { id: eventId } = useParams()  const { mutate: createEvent, isLoading: isCreatingEvent } = useCreateEvent()  const { mutate: updateEvent, isLoading: isUpdatingEvent } = useUpdateEvent(    eventId as string  )  const navigate = useNavigate()  useRouteGuard({    // очищаем стейт при уходе со страницы    onRouteLeave: () => {      reset()    }  })  // ===== handlers =====  const handlePrevClick = (): void => {    if (step === EventCreateSteps.One) {      navigate('/meetings')    } else {      setStep(step - 1)    }  }  const handleSubmit = (): void => {    const isEdit = type === 'edit'    const onSuccess = (): void => {      navigate(`/meetings/`)    }    if (isEdit) {      updateEvent(form as UpdateEventRequest, {        // TODO: поменять тип        onSuccess      })    } else {      createEvent(form as CreateEventRequest, {        onSuccess      })    }  }  // ===== render =====  let Component  switch (step) {    case EventCreateSteps.One:      Component = StepOne      break    case EventCreateSteps.Two:      Component = StepTwo      break    case EventCreateSteps.Three:      Component = StepThree      break    case EventCreateSteps.Four:      Component = StepFour      break  }  const isSubmitButtonDisabled =    step === EventCreateSteps.Four && !participantIds?.length  return (    <div>      <Space direction="horizontal" align="center">        <Space          className={styles.backButton}          direction="horizontal"          align="center"          gap="xsmall"          onClick={handlePrevClick}        >          <IconChevronLeft />          <Text variant="subtitle-2" color="secondary">            Назад          </Text>        </Space>        <Text color="tertiary">Шаг {step} из 4</Text>      </Space>      <Space gap="large" justify="space-between" className={styles.wrapper}>        {Component && <Component onSubmit={handleSubmit} />}        <Space direction="horizontal">          <Button            type="submit"            form={`meeting-create-step-${step}`}            loading={isCreatingEvent || isUpdatingEvent}            disabled={isSubmitButtonDisabled}          >            {step === EventCreateSteps.Four              ? 'Опубликовать собрание'              : 'Следующий шаг'}          </Button>          {step !== EventCreateSteps.One && <CreateTemplateButton />}        </Space>      </Space>    </div>  )}export default EventForm